<template>
  <el-dialog v-model="visible" :title="title" :close-on-click-modal="false">
    <el-form label-width="120px" ref="form" :model="formData" :rules="rules" @submit.prevent="onFormSubmit">
      <el-form-item label="栏目名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>

      <el-form-item label="栏目类型" prop="type">
        <el-select-v2 v-model="formData.type" :options="typeList" @change="onTypeChange" />
      </el-form-item>

      <el-form-item label="栏目简介">
        <el-input v-model="formData.description" type="textarea" :rows="3" />
      </el-form-item>

      <el-form-item label="首页模板" prop="template_index">
        <el-input v-model="formData.template_index" />
      </el-form-item>

      <el-form-item label="列表模板" prop="template_list">
        <el-input v-model="formData.template_list" />
      </el-form-item>

      <el-form-item label="详情页模板" prop="template_detail">
        <el-input v-model="formData.template_detail" />
      </el-form-item>

      <el-form-item label="排列顺序">
        <el-input v-model.number="formData.sort" />
      </el-form-item>

      <el-form-item label="其它">
        <el-checkbox v-model.number="formData.is_disabled">禁用</el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" native-type="submit" :loading="formSubing">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, ref, watch } from 'vue'
import { useCommonState } from '@/store/common'
import { createForm, injectDialogState } from '@/plugins/element'
import { submitBoard } from '@/services/board.service'
import { ElMessage } from 'element-plus'
import { dialogKey } from '../index.vue'

export default defineComponent({
  name: 'BoardForm',
  setup () {
    const form = createForm()
    const formSubing = ref(false)
    const dialog = injectDialogState<Board>(dialogKey)
    const formData = ref<Board>({} as any)
    const commonStore = useCommonState()
    const rules = ref({
      name: [{ required: true, message: '请填写栏目名' }],
      type: [{ required: true, message: '请选择栏目类型' }],
      template_index: [{ required: true, message: '请填写首页模板' }],
      template_list: [{ required: true, message: '请填写列表模板' }],
      template_detail: [{ required: true, message: '请填写详情页模板' }]
    })

    // 窗口打开
    watch(() => dialog.visible, async () => {
      if (dialog.visible) {
        formData.value = dialog.formData.value as any
        await nextTick()
        if (form.value) {
          form.value.clearValidate()
        }
      }
    }, { deep: true })

    // 栏目类型变更事件
    const onTypeChange = () => {
      // 修改栏目类型对应的模板路径
      const row = commonStore.types.find(item => item.name === formData.value.type)
      if (!row) {
        return
      }
      formData.value.template_index = row.template_index
      formData.value.template_list = row.template_list
      formData.value.template_detail = row.template_detail
    }

    // 表单提交
    const onFormSubmit = async () => {
      await form.value.validate()
      formSubing.value = true
      try {
        const res = await submitBoard(formData.value)
        dialog?.hide()
        dialog?.success?.(formData.value.id ? 'edit' : 'create', res)
        ElMessage.success(formData.value.id ? '修改成功' : '新建成功')
      } catch (e) {
        ElMessage.error(e.message)
      } finally {
        formSubing.value = false
      }
    }
    return {
      visible: dialog.visible,
      title: dialog.title,
      form,
      formSubing,
      formData,
      rules,
      typeList: computed(() => commonStore.types.map(item => ({ label: item.text, value: item.name }))),
      onTypeChange,
      onFormSubmit
    }
  }
})
</script>

<style scoped lang="scss">

</style>
